<template>
    <div>
        <!-- 树型下拉 -->
        <avue-input-tree
          ref="tree"
          :clearable="clearable"
          :filterable="filterable"
          :placeholder="placeholder"
          :default-expand-all="actualTreeConfig.defaultExpandAll"
          :dic="actualOptions"
          :multiple="multiple"
          v-model="actualValue"
          :leaf-only="actualTreeConfig.leafOnly"
          :include-half-checked="actualTreeConfig.includeHalfChecked"
          :check-strictly="actualTreeConfig.checkStrictly"
          :props="{value: optionProps.value, label: optionProps.label}"
          :disabled="disabled"
          @change="change"
          v-if="isTree"
        ></avue-input-tree>
        <!-- 下拉 -->
        <el-select
            :clearable="clearable"
            :filterable="filterable"
            :placeholder="placeholder"
            v-model="actualValue"
            :multiple="multiple"
            :multiple-limit="multipleLimit"
            :disabled="disabled"
            @change="change"
            v-else
        >
            <el-option
                v-for="item in actualOptions"
                :key="item[optionProps.value]"
                :label="item[optionProps.label]"
                :value="item[optionProps.value]"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    props:{
        value: {
            type: [String, Number, Array],
            required: false
        },
        /*
            String：数据字典编码
            Number： 0-组织架构 1-部门数据
            Array：数据源
        */
        options: {
            type: [String, Number, Array]
        },
        optionProps: {
            type: Object,
            default() {
                return {
                    value: "value",
                    label: "label",
                    manaId: ''
                };
            },
        },
        multiple: {
            type: Boolean,
            default: false
        },
        multipleLimit: {
            type: Number,
            default: 0
        },
        filterable: {
            type: Boolean,
            default: true
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: "请选择"
        },
        disabled: {
            type: Boolean,
            default: false
        },
        /*
        {
            defaultExpandAll: true,         //true：默认展开
            leafOnly: false,                //true：只保存叶子节点
            includeHalfChecked: false,      //true：半选不包含父节点
            checkStrictly: false            //true：父子节点不关联
        } 
        */
        treeConfig: [Boolean, Object],
    },
    watch:{
        value(newVal, oldVal) {
            let t = typeof newVal;
            this.actualValue = t === 'number' ? newVal + '' : newVal || '';
        },
        actualValue(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit("input", newVal);
            }
        },
        options(val, oldVal) {
            this.initOptions();
        },
        optionProps(props, oldVal) {
            if(this.options === 1 && props.manaId){
                this.actualOptions = this.$store.getters.deplist.filter( item => item.B_ManaframeId === this.optionProps.manaId ) || [];
            }
        },
        treeConfig(newVal, oldVal) {
            this.initTreeConfig();
        }
    },
    computed:{
    },
    data(){
        return{
            isTree: false,
            actualValue: typeof this.value === 'number' ? this.value + '' : this.value || '',
            actualOptions: [],
            actualTreeConfig: {
                defaultExpandAll: true,
                leafOnly: false,
                includeHalfChecked: false,
                checkStrictly: false
            } 
        }
    },
    created(){
        this.initTreeConfig();
        this.initOptions();
    },
    mounted(){
    },
    methods:{
        initTreeConfig(){
            if (this.treeConfig){
                this.isTree = true;
                if (typeof this.treeConfig != 'boolean') {
                    Object.assign(this.actualTreeConfig, this.treeConfig)
                }
            } 
        },
        initOptions(){
            let t = typeof this.options;
            if(t === 'string'){
                this.actualOptions = this.util.getDataItemList(this.options);
            }else if(t === 'number'){
                switch (this.options) {
                    case 0:
                        this.actualOptions = this.$store.getters.manalist;
                        this.isTree = true;
                    break;
                    case 1:
                        let temp = this.$store.getters.deplist;
                        this.actualOptions = this.optionProps.manaId ? temp.filter( item => item.B_ManaframeId === this.optionProps.manaId ) || [] : temp;
                        this.isTree = true;
                    break;
                }
            }
            else{
                this.actualOptions = this.options
            }
        },
        change(val){
            this.$forceUpdate();
            this.$nextTick(()=>{
                this.$emit("change",val);
            })
        },
    }
}
</script>
